import React, { Component } from 'react';
import List from './components/List'
import { getList } from './api'
import './App.css'
import BScroll from '@better-scroll/core'
// 开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，
// 当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。
import ObserveDOM from '@better-scroll/observe-dom'
// 开启对 wrapper 子元素中图片元素的加载的探测。无论图片的加载成功与否，都会自动调用 
// BetterScroll 的 refresh 方法来重新计算可滚动的宽度或者高度，
import ObserveImage from '@better-scroll/observe-image'
import Pullup from '@better-scroll/pull-up'

BScroll.use(Pullup)
BScroll.use(ObserveImage)
BScroll.use(ObserveDOM)

class App extends Component {
  state = {
    list: [],
    // 每页个数，
    pageSize: 20,
    // 当前页码
    pageCode: 1
  }
  // 封装一个数据加载的函数
  async getListAndSet() {
    const { pageSize, pageCode, list } = this.state
    // 请求数据
    const resp = await getList({ pageCode, pageSize })
    // 合拼数据
    this.setState({
      list: [...list, ...resp.data.data],
      // 让当前页码进行 ++  方便下一次调用该函数的时候， 是获取的下一页的数据
      pageCode: pageCode + 1
    })
  }
  initBetterScroll() {
    // 实例
    this.bs = new BScroll('.wrapper', {
      observeDOM: true, // 开启 observe-dom 插件
      observeImage: true, // 开启 observe-image 插件
      pullUpLoad: true //开启  上拉加载功能
    })

    // 添加bs滑动到底部的事件
    this.bs.on('pullingUp', () => {
      // 调用请求数据的方法
      this.getListAndSet()
      // 监测到上拉刷新的动作之后，pullingUp 事件的消费机会只有一次，因此你需要调用 finishPullUp() 来
      // 告诉 BetterScroll 来提供下一次 pullingUp 事件的消费机会
      this.bs.finishPullUp()
    })
  }
  componentDidMount() {
    this.getListAndSet()
    this.initBetterScroll()
  }
  render() {
    console.log(this.state.list)
    const { list } = this.state
    return (
      <div>
        <div className="wrapper">
          <div className="content">
            <List list={list}></List>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
